<template>
  <div>
    <div class="item">
      <el-form-item :prop="propKey" :rules="rulesKey" v-if="isKey">
        <el-input
          size="small"
          placeholder="键"
          :value="value.name"
          :disabled="disabled"
          @input="$emit('input', { ...value, name: $event })"
        >
          <template slot="prepend">键</template>
        </el-input>
      </el-form-item>
      <el-form-item style="margin: 0 10px" :prop="propVal" :rules="rulesVal">
        <!-- {{ isPopoverInput }} -->
        <el-input
          v-if="isPopoverInput"
          size="small"
          placeholder="值"
          :value="value.defaultValue"
          @input="$emit('input', { ...value, defaultValue: $event })"
        >
          <template slot="prepend">值</template>
        </el-input>

        <PopoverInput
          :prepend="true"
          v-else
          :value="value.defaultValue"
          @input="$emit('input', { ...value, defaultValue: $event })"
          @changeRadio="
            (row) => {
              changeRadio(row);
            }
          "
          :objKey="'funArr'"
          :keys="'filterFun22'"
        ></PopoverInput>
      </el-form-item>

      <i
        v-if="isDel"
        @click="handDel"
        style="font-size: 18px; color: #999999"
        class="el-icon-delete"
      ></i>
    </div>
  </div>
</template>
<script>
import PopoverInput from "@/components/PopoverInput";
export default {
  components: {
    PopoverInput,
  },
  props: {
    isKey: {
      type: Boolean,
      default: true,
    },
    isPopoverInput: {
      type: Boolean,
      default: true,
    },
    propKey: {
      type: String,
      default: "",
    },
    rulesKey: {
      type: [Object, Array],
    },
    rulesVal: {
      type: Object,
      default: () => {},
    },
    propVal: {
      type: String,
      default: "",
    },
    isDel: {
      type: Boolean,
      default: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    value: {
      type: Object,
      default: () => {},
    },
  },
  methods: {
    changeRadio(row) {
      this.$emit("input", {
        ...this.value,
        defaultValue: row.valueType || row.value,
      });
    },
    handDel() {
      this.$emit("handDel");
    },
  },
};
</script>

<style lang='scss' scoped>
.item {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  /deep/ .el-form-item__content {
    line-height: normal;
  }
  /* /deep/ .el-form-item__error {
    margin-bottom: 5px;
  } */
}
</style>